
<template>
  <div id="tab">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      stripe
      :border="boederShow"
      @header-dragend="dragendTable"
      :row-class-name="tableRowClassName"
    >
      <el-table-column
        v-for=" (iteam, index) in tableHeadeTemp"
        :key="`col_${index}`"
        :prop="tableHeade[index]['prop']"
        :label="tableHeadeTemp[index]['label']"
        :width="tableHeade[index]['width']"
      >
      <!-- <el-table-column
        v-for=" (iteam, index) in tableHeadeTemp"
        :key="`col_${index}`"
        :prop="tableHeade[index]['prop']"
        :label="tableHeade[index]['label']"
        :width="tableHeade[index]['width']"
      > -->
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import Sortable from 'sortablejs'
  // tableHeadeTemp: [{
  //           prop: "date",
  //           label: "日期",
  //           width: "180"
  //         },{
  //           prop: "name",
  //           label: "姓名",
  //           width: "180"
  //         },{
  //           prop: "address",
  //           label: "地址",
  //           width: ""
  //         }],
    export default {
      data() {
        return {
          boederShow: true,
          tableHeadeTemp: [{
            label: "日期"
          },{
            label: "姓名"
          },{
            label: "地址"
          }],
          tableHeade:[{
            prop: "date",
            label: "日期",
            width: "180"
          },{
            prop: "name",
            label: "姓名",
            width: "180"
          },{
            prop: "address",
            label: "地址",
            width: ""
          }],
          tableData: [{
            id: 0,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            id: 1,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            id: 2,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 3,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      },
      methods: {
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        },
        dragendTable(newWidth, oldWidth, column){
          console.log(column.id,"aa")
          let columnIndex =  column.id.charAt(column.id.length - 1) - 1
          this.$set(this.$data.tableHeade[columnIndex],'width',newWidth)
        },//行拖拽
        rowDrop() {
          const tbody = document.querySelector('.el-table__body-wrapper tbody')
          const _this = this
          Sortable.create(tbody, {
            onEnd({ newIndex, oldIndex }) {
              const currRow = _this.$data.tableData.splice(oldIndex, 1)[0]
              _this.$data.tableData.splice(newIndex, 0, currRow)
            }
          })
        },
        // 列拖拽
        columnDrop() {
          const _this = this
          const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
          Sortable.create(wrapperTr, {
            animation: 180,
            delay: 0,
            onEnd({ newIndex, oldIndex }) {
              const currClo = _this.$data.tableHeade.splice(oldIndex, 1)[0]
              console.log(newIndex, oldIndex)
              _this.$data.tableHeade.splice(newIndex, 0, currClo)
              _this.$nextTick(function () {
                console.log( _this.$data.tableHeade)
              })
            }
            // onEnd: evt => {
            //   // const oldItem = this.tableHeade[evt.oldIndex]
            //   // console.log(oldItem)
            //   // _this.tableHeade.splice(evt.oldIndex, 1)
            //   // _this.tableHeade.splice(evt.newIndex, 0, oldItem)
            // }
          })
        }
      },
      mounted() {
          this.rowDrop()
          this.columnDrop()
      }
    }
  </script>

 <style>

 </style>

